<template>
  <div class="basic-info-container">
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="高校名称">
        <el-input v-model="searchForm.name" placeholder="请输入高校名称"></el-input>
      </el-form-item>
      <el-form-item label="学校性质">
        <el-select v-model="searchForm.schoolNature" placeholder="请选择学校性质">
          <el-option label="985" value="985"></el-option>
          <el-option label="211" value="211"></el-option>
          <el-option label="双一流" value="双一流"></el-option>
          <el-option label="普通本科" value="普通本科"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="handleAdd">新增高校</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="高校名称" width="180"></el-table-column>
      <el-table-column label="校徽" width="100">
        <template slot-scope="scope">
          <el-image 
            style="width: 40px; height: 40px"
            :src="scope.row.logo"
            :preview-src-list="[scope.row.logo]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="phone" label="联系电话" width="120"></el-table-column>
      <el-table-column prop="establishedYear" label="建校年份" width="100"></el-table-column>
      <el-table-column prop="admissionCode" label="招生代码" width="120"></el-table-column>
      <el-table-column prop="schoolNature" label="学校性质" width="120"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
      </el-pagination>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="高校名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="校徽" prop="logo">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8089/api/upload"
            :show-file-list="false"
            :on-success="handleLogoSuccess"
            :before-upload="beforeLogoUpload">
            <img v-if="form.logo" :src="form.logo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="建校年份" prop="establishedYear">
          <el-input-number v-model="form.establishedYear" :min="1800" :max="2024"></el-input-number>
        </el-form-item>
        <el-form-item label="招生代码" prop="admissionCode">
          <el-input v-model="form.admissionCode"></el-input>
        </el-form-item>
        <el-form-item label="学校性质" prop="schoolNature">
          <el-select v-model="form.schoolNature" placeholder="请选择学校性质">
            <el-option label="985" value="985"></el-option>
            <el-option label="211" value="211"></el-option>
            <el-option label="双一流" value="双一流"></el-option>
            <el-option label="普通本科" value="普通本科"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BasicInfo',
  data() {
    return {
      searchForm: {
        name: '',
        schoolNature: ''
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      dialogTitle: '新增高校',
      form: {
        name: '',
        logo: '',
        address: '',
        phone: '',
        establishedYear: 2000,
        admissionCode: '',
        schoolNature: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入高校名称', trigger: 'blur' }
        ],
        logo: [
          { required: true, message: '请上传校徽', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/, message: '请输入正确的电话号码', trigger: 'blur' }
        ],
        establishedYear: [
          { required: true, message: '请输入建校年份', trigger: 'blur' }
        ],
        admissionCode: [
          { required: true, message: '请输入招生代码', trigger: 'blur' }
        ],
        schoolNature: [
          { required: true, message: '请选择学校性质', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取数据
    async fetchData() {
      try {
        const params = {
          page: this.pagination.currentPage,
          size: this.pagination.pageSize,
          name: this.searchForm.name,
          schoolNature: this.searchForm.schoolNature
        }
        const res = await this.$axios.get('/university/list', { params })
        this.tableData = res.data.records
        this.pagination.total = res.data.total
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },
    // 搜索
    handleSearch() {
      this.pagination.currentPage = 1
      this.fetchData()
    },
    // 重置搜索
    resetSearch() {
      this.searchForm = {
        name: '',
        schoolNature: ''
      }
      this.handleSearch()
    },
    // 新增
    handleAdd() {
      this.dialogTitle = '新增高校'
      this.form = {
        name: '',
        logo: '',
        address: '',
        phone: '',
        establishedYear: 2000,
        admissionCode: '',
        schoolNature: ''
      }
      this.dialogVisible = true
    },
    // 编辑
    handleEdit(row) {
      this.dialogTitle = '编辑高校'
      this.form = { ...row }
      this.dialogVisible = true
    },
    // 删除
    handleDelete(row) {
      this.$confirm('确认删除该高校信息吗？', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          await this.$axios.delete(`/university/delete/${row.id}`)
          this.$message.success('删除成功')
          this.fetchData()
        } catch (error) {
          this.$message.error('删除失败')
        }
      }).catch(() => {})
    },
    // 提交表单
    handleSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            if (this.form.id) {
              // 编辑
              await this.$axios.put('/university/update', this.form)
              this.$message.success('更新成功')
            } else {
              // 新增
              await this.$axios.post('/university/add', this.form)
              this.$message.success('添加成功')
            }
            this.dialogVisible = false
            this.fetchData()
          } catch (error) {
            this.$message.error(error.message || '操作失败')
          }
        }
      })
    },
    // 分页
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.fetchData()
    },
    // 校徽上传成功回调
    handleLogoSuccess(res, file) {
      this.form.logo = res.data // 假设后端返回的数据中包含了文件访问URL
    },
    // 校徽上传前的校验
    beforeLogoUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传校徽图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传校徽图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
.basic-info-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-form {
  margin-bottom: 20px;
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}
.avatar-uploader:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style> 